<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <!-- 
        // A JavaScript library for building user interface
        // all in js = 关注点分离
        // 1 htmlcssjs=>2 html css js =>3 component （template style script）=?component:jsx (html css 都写成js形式)
        // Learn Once, Write Anywhere
        // react : react =>react-dom web / react-native app / react vr / electron + react
     -->
   <!-- 01 准备容器 -->
   <div id="app"></div>

   <!-- 02 引入react 开发相关库 注意顺序 -->
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>

    <script type="text/babel">
         class App extends React.Component{
            state={a:0,b:0,c:0}
            handleClick = ()=>{
               // 3次setState=>render 执行一次=> setState批量更新=>state数据全部修改 =>
                // 批量更新完毕=>render 
                // 这是react 性能优化机制 
                // this.setState({a:1})
                // this.setState({b:1})
                // this.setState({c:1})

                //同步 非批量更新
               setTimeout(() => {
                    this.setState({a:1})
                    this.setState({b:1})
                    this.setState({c:1})
               }, 0);
            }

            render(){
                console.log('render');
                return(
                    <div>
                        <h1>{this.state.a}</h1>
                        <h1>{this.state.b}</h1>
                        <h1>{this.state.c}</h1>
                            {/*onClick onChange : 合成事件 对事件进行包装 (事件代理 委托)*/}
                        <button onClick={this.handleClick}>click</button>
                    </div>
                )
            }
         }

const App = (props) => {

        const [a, setA] = React.useState(0)
        const [b, setB] = React.useState(0)
        const [c, setC] = React.useState(0)

        const handleClick = () => {
            setTimeout(() => {
                setA(a+1)
                setB(b+1)
                setC(c+1)
            }, 0)
        }

        console.log("render")
        return (
            <div>
                <h1>{a}</h1>
                <h1>{b}</h1>
                <h1>{c}</h1>
                <button onClick={handleClick}>click</button>
            </div>
         )
        }
        ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>